////////////////////
//Multiplayer Games Interface Manager
////////////////////

PRESENCE.GAME.INTERFACE = (function(P,$,undefined){
	
	////////////////////////////
  //       CALLBACKS        //
  ////////////////////////////
	
	updateInterfaceAfterGameRequestReceived = function(slug,game){
    //gameStatus="pending";
		
	  //Show or create chatbox
	  PRESENCE.WINDOW.createBuddyChatBox(slug);
	  var chatBox = PRESENCE.WINDOW.getChatBoxForSlug(slug);
		
	  //Show invitation message
	  showGameInvitation(slug,game);
	  
		//Hide hideVideoChatButton
    hideVideoChatButton(slug);
		
	  //Show gamebox
	  PRESENCE.WINDOW.toggleVideoBoxForSlug(slug,true);
	}
	
	var updateInterfaceBeforeStartGame = function(slug,game){
    var parentDiv = document.createElement('div');
    var divID = 'game_' + slug + contactsInfo[slug].game.id;
    parentDiv.setAttribute('id', divID);
    $(parentDiv).css('width', "100%");
    $(parentDiv).css('height', "100%");
    PRESENCE.WINDOW.setVideoBoxContent(slug,parentDiv);

    PRESENCE.GAME.startGame(slug,divID)
  }
  
  var updateInterfaceAfterFinishGame = function(slug,game){
    PRESENCE.WINDOW.toggleVideoBoxForSlug(slug,false);
    showVideoChatButton(slug);
  }
	
	var updateInterfaceOnInformationMessage = function(slug,msg){
    PRESENCE.WINDOW.setVideoBoxContent(slug,"<p class=\"game-info\"> " + msg +" </p>");
  }



  //////////////////////////
  //      TRIGGERS        //
  //////////////////////////
  
  var pickGamesButton = function (uiElement){
    var slug = $(uiElement.element).attr("id");
    var videoBoxVisibility = PRESENCE.WINDOW.toggleVideoBoxForSlug(slug);
  
    if (videoBoxVisibility) {
      hideVideoChatButton(slug);
      showGames(slug);
    } else {
      showVideoChatButton(slug);
      PRESENCE.GAME.finishGame(slug);
    }
  }
  
  
  ///////////////////////////
  //      GAME LIST        //
  ///////////////////////////
  
  function gameItem(name,choice,thumbnail) {
    this.name = name;
    this.choice = choice;
    this.thumbnail = thumbnail;
  }
 
  var gameList = [];
  gameList.push(new gameItem("Modern Tic Tac Toe","Modern-TER","/assets/games/ter/modern_thumbnail.png"))
  gameList.push(new gameItem("Classic Tic Tac Toe","Classic-TER","/assets/games/ter/classic_thumbnail.png"))
  //gameList.push(new gameItem("Street Fighter","SFIGTHER","/assets/games/sfighter/thumbnail.png"))
  
  var showGames = function(slug,gameItem){
    if((typeof gameItem == 'undefined')||(gameItem==null)){
      if (gameList.length > 0) {
          gameItem = gameList[0]
      } else {
        gameItem = new gameItem("No games available","None","")
      }
    }
    var template = generateGameSelectionTemplate(slug,gameItem)
    PRESENCE.WINDOW.setVideoBoxContent(slug,template);
    setShowGamesButtonsFunction();
  }
	
	var onGameSelected = function (slug,game){
		  PRESENCE.GAME.requestUserToPlay(slug, game);
  }



	///////////////////////////////
  //  INTERFACE HELP METHODS   //
  ///////////////////////////////
	
	var generateGameSelectionTemplate = function (slug,gameItem) {
    var template = 
    "<div class=\"game-choices\">" +
    
      "<div class=\"game-choice-buttonLeft\">" +
        "<a class=\"game-choice-linkLeft\">" +
          "<img class=\"game-button-img\" src=\"/assets/btn/group_left.png\" >" +
        "</a>" +
      "</div>" +
      
      "<div class=\"game-choice\">" +
        "<a class=\"game-choice-link\" slug=" + slug + " choice=\"" + gameItem.choice + "\" >" +
          "<img class=\"game-choice-img\" src=\"" + gameItem.thumbnail + "\" >" +
          "<p class=\"game-name\">" + gameItem.name + " </p>" +
        "</a>" +
      "</div>" +
      
      "<div class=\"game-choice-buttonRight\">" +
        "<a class=\"game-choice-linkRight\">" +
          "<img class=\"game-button-img\" src=\"/assets/btn/group_right.png\" >" +
        "</a>" +
      "</div>" +
      
    "</div>"
    return template;
  }
  
  var setShowGamesButtonsFunction = function(){
    $(".game-choice-link").click(function(event) {
      var choice = $(this).attr("choice")
      var slug = $(this).attr("slug")
      var mygame = P.GAME.FACTORY.getGame(slug,choice);
      onGameSelected(slug,mygame)
    });

	  $(".game-choice-linkLeft").click(function(event) {
	    var gameChoice = $(event.target).parent().parent().parent().find(".game-choice-link")
	    var slug = gameChoice.attr("slug")
	    var choice = gameChoice.attr("choice")
	    var newGameItem = getPreviousGameItem(choice)
	    showGames(slug,newGameItem);
	  });
	  
	  $(".game-choice-linkRight").click(function(event) {
	    var gameChoice = $(event.target).parent().parent().parent().find(".game-choice-link")
	    var slug = gameChoice.attr("slug")
	    var choice = gameChoice.attr("choice")
	    var newGameItem = getNextGameItem(choice)
	    showGames(slug,newGameItem);
	  });
  }
 
  var getNextGameItem = function(actualChoice){
    var nextGameItem=null;
    $.each(gameList, function(index, value) {
      if(value.choice == actualChoice){
        if(index==gameList.length-1){
          nextGameItem = gameList[0]
        } else {
          nextGameItem = gameList[index+1];
        }
      }
    });
    return nextGameItem;
  }
 
  var getPreviousGameItem = function(actualChoice){
    var nextGameItem=null;
    $.each(gameList, function(index, value) {
      if(value.choice == actualChoice){
        if(index==0){
          nextGameItem = gameList[gameList.length-1]
        } else {
          nextGameItem = gameList[index-1];
        }
      }
    });
    return nextGameItem;
  }
  
	var showGameInvitation = function(slug,game){
		var title = "<p class=\"game-info\">" + I18n.t("chat.game.call", {name: PRESENCE.XMPPClient.getNameFromSlug(slug), game: game.name}) + " </p>";
    var msg = title + "<p class=\"game-request\"> <a class=\"gameButton\" slug=\""+slug+"\" value=\"yes\">" + I18n.t("chat.game.accept") + "</a> -" 
    + " <a class=\"gameButton\" slug=\""+slug+"\" value=\"no\">" + I18n.t("chat.game.deny") + "</a> </p>";
    PRESENCE.WINDOW.setVideoBoxContent(slug,msg);
    setGameRequestButtonsFunction();
	}
	
	var setGameRequestButtonsFunction = function(){
	  $(".gameButton").click(function(event) { 
	    event.preventDefault();
	    var result = $(this).attr("value");
	    var slug = $(this).attr("slug");
			PRESENCE.GAME.responseUserToPlay(slug,result);
	  });
	}
	
	var hideVideoChatButton = function(slug){
		$(PRESENCE.WINDOW.getChatBoxButtonForSlug(slug,"video")).hide();
	}
	
	var showVideoChatButton = function(slug){
    $(PRESENCE.WINDOW.getChatBoxButtonForSlug(slug,"video")).show();
  }
	
	var play = function(){
		$(".chat-gamesthick").css("display","block");
	}
	
	var enableGameFeature = function(enable){	  
    //Changing chat-gamesthick CSS class by JQuery
    var ss = document.styleSheets;
    for (var i=0; i<ss.length; i++) {
        var rules = ss[i].cssRules || ss[i].rules;
        if (rules != undefined){
          for (var j=0; j<rules.length; j++) {
              if (rules[j].selectorText === ".chat-gamesthick") {
								  if(enable){
										rules[j].style.display = 'block'
									} else {
										rules[j].style.display = 'none'
									}
              }
          }
        }
    }
	}
	
  return {
		pickGamesButton: pickGamesButton,
		updateInterfaceAfterGameRequestReceived: updateInterfaceAfterGameRequestReceived,
		updateInterfaceBeforeStartGame: updateInterfaceBeforeStartGame,
		updateInterfaceAfterFinishGame: updateInterfaceAfterFinishGame,
		updateInterfaceOnInformationMessage: updateInterfaceOnInformationMessage,
		play: play,
		enableGameFeature : enableGameFeature
  };

}) (PRESENCE, jQuery);